<template>
	<!-- 动态/资讯详情 -->
	<view class="detail_home">
		<view class="detail_title">
			{{ item.title }}
		</view>
		<view class="detail_time">
			{{ item.createtime }}
		</view>
		<!-- 主要内容 -->
		<scroll-view scroll-y="true" class="detail_content">
			<u-parse :html="item.content"></u-parse>
		</scroll-view>
		<view class="detail_function">
			<!-- 浏览 -->
			<view>
				<img src="/static/home/view.png" alt="浏览" />
				{{ item.view==null?0:item.view }}
			</view>
			<!-- 点赞 -->
			<view @click="addLikes">
				<u-icon :color="likeState" style="margin-right: 10rpx;" name="thumb-up-fill" size="22"></u-icon>
				{{ item.likes==null?0:item.likes }}
			</view>
			<!-- 收藏 -->
			<view @click="collect">
				<u-icon :color="item.isCollect==='f'?'#595959':'#FBCB11'" style="margin-right: 10rpx;" name="star-fill" size="22"></u-icon>
				{{ item.collect==null?0:item.collect }}
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{},
				likeState:'#595959',
				userId:2
			}
		},
		methods: {
			async getDetail(id){
				let res = await this.$api.queryInformation({id:id,userid:this.userId});
				if(!res?.success){
					uni.showToast({title:"数据获取失败！",icon:"error"})
					return;
				}
				this.item = res.result;
			},
			// 点赞
			addLikes(){
				const id = this.item.id;
				if(this.likeState==='#595959')this.likeState = '#FE020E';
				this.$api.likeInformation({id:id});
				this.item.likes++;
			},
			// 收藏
			collect(){
				const id = this.item.id;
				if(this.item.isCollect==='f'){
					this.item.isCollect = 't';
					if(this.item.collect!=null)this.item.collect++;
					else this.item.collect = 1;
					this.$refs.uToast.show({type:'success',title: "已收藏!"});
				}else{
					this.item.isCollect = 'f';
					if(this.item.collect!=null||this.item.collect>0)this.item.collect--;
					else this.item.collect = 0;
					this.$refs.uToast.show({type:'error',title: "取消收藏!"});
				}
				this.$api.collect({
					collectionId:id,
					state:this.item.isCollect,
					type: '3',
					userId:this.userId
				});
			}
		},
		async onLoad(options) {
			await this.getDetail(options.id);
			// 更换标头文字为对应动态标题
			uni.setNavigationBarTitle({
				title:this.item.title
			});
		},
		created() {
			let userMessage = this.$store.state.user_message;
			// 获取用户id
			if(this.$store.state.phone_login_token)
				this.userId = JSON.parse(userMessage).id;
		}
	}
</script>

<style>
page{
	background: #F5F5F5;
}
</style>

<style scoped lang="scss">
.detail_home{
	padding: 32rpx;
	.detail_title{
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: rgba(0,0,0,0.8);
		margin-bottom: 18rpx;
	}
	.detail_time{
		font-family: DIN, DIN;
		font-weight: 400;
		font-size: 22rpx;
		color: rgba(0,0,0,0.45);
		margin-bottom: 32rpx;
	}
	.detail_content{
		width: 100%;
		height: 1448rpx;
		background-color: #FFFFFF;
		margin-bottom: 32rpx;
	}
	.detail_function{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-family: DIN, DIN;
		font-weight: 400;
		font-size: 22rpx;
		color: #595959;
		view{
			margin-left: 32rpx;
			display: flex;
			align-items: center;
			img{
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
			}
		}
	}
}
</style>
